<!-- 商品列表页 -->
<template>
  <div class="product-main">
    <!-- 搜索框 -->
    <el-card shadow="hover">
      <div slot="header">
        <span>商品搜索框</span>
      </div>
      <el-row :gutter="30">
        <el-col :span="6">
          <el-input size="small" v-model="search.gname" placeholder="请输入商品名称"></el-input>
        </el-col>
        <el-col :span="6">
          <el-input size="small" v-model="search.pcode" placeholder="请输入商品编码"></el-input>
        </el-col>
        <el-col :span="6">
          <el-input size="small" v-model="search.brandId" placeholder="请输入商品品牌"></el-input>
        </el-col>
        <el-col :span="6">
          <el-input size="small" v-model="search.isshow" placeholder="商品是否上架 0 否, 1 是"></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="30" style="margin-top:20px">
        <el-col :span="6">
          <el-input size="small" v-model="search.kindId" placeholder="根据商品分类Id"></el-input>
        </el-col>
        <el-col :span="6" :offset="12" style="text-align:right">
          <el-button type="primary" size="small" @click="doSearch">搜索</el-button>
        </el-col>
      </el-row>
    </el-card>

    <!-- 列表页 -->
    <el-card>
      <div slot="header">
        <span>商品列表页</span>
        <el-button type="primary" size="small" style="float:right" @click="productAdd">新增</el-button>
      </div>
      <el-table :data="productList" border style="width: 100%" v-loading="loading">
        <el-table-column align="center" fixed label="#" type="index" width="50"></el-table-column>
        <el-table-column align="center" fixed prop="cover_img" label="商品图片" width="150">
          <template slot-scope="scope">
            <el-image style="width: 100px; height: 100px;" :src="scope.row.cover_img"></el-image>
          </template>
        </el-table-column>
        <el-table-column align="center" label="商品名称" width="300">
          <template slot-scope="scope">
            <p>{{scope.row.gname}}</p>
            <p>品牌:{{scope.row.brandName}} | {{scope.row.brandEname}}</p>
            <p>{{scope.row.descr}}</p>
          </template>
        </el-table-column>
        <el-table-column align="center" label="标签" width="160">
          <template slot-scope="scope">
            <p>
              上架:
              <el-switch
                style="margin-left:5px"
                v-model="scope.row.isshow"
                active-color="#409EFF"
                inactive-color="#DCDFE6"
                :active-value="1"
                :inactive-value="0"
                @change="codeChange('isshow',scope.row.isshow,scope.row.id)"
              ></el-switch>
            </p>
            <p>
              最热:
              <el-switch
                style="margin-left:5px"
                v-model="scope.row.ishot"
                active-color="#409EFF"
                inactive-color="#DCDFE6"
                :active-value="1"
                :inactive-value="0"
                @change="codeChange('ishot',scope.row.isshow,scope.row.id)"
              ></el-switch>
            </p>
            <p>
              最新:
              <el-switch
                style="margin-left:5px"
                v-model="scope.row.isnew"
                active-color="#409EFF"
                inactive-color="#DCDFE6"
                :active-value="1"
                :inactive-value="0"
                @change="codeChange('isnew',scope.row.isshow,scope.row.id)"
              ></el-switch>
            </p>
          </template>
        </el-table-column>
        <el-table-column align="center" label="价格/货号" width="140">
          <template slot-scope="scope">
            <p>
              价格:
              <span style="margin-left:5px">¥{{scope.row.price_now}}</span>
            </p>
            <p>
              货号:
              <span style="margin-left:5px">{{scope.row.pcode}}</span>
            </p>
          </template>
        </el-table-column>
        <el-table-column align="center" label="所属分类" prop="ctitles" width="180"></el-table-column>
        <el-table-column align="center" prop="sort" label="排序" width="120"></el-table-column>
        <el-table-column align="center" prop="origin_city" label="原产地" width="120"></el-table-column>
        <el-table-column align="center" prop="addtime" label="添加时间" width="220"></el-table-column>
        <el-table-column align="center" fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="doEdit(scope.row.id)">编辑</el-button>
            <el-button type="text" size="small" style="color:red" @click="doDel(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        style="float:right; margin:20px 0"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.start"
        :page-sizes="page.sizes"
        :page-size="page.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.totalcount"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
import productApi from "@/api/product/index";
import _ from "lodash";
export default {
  name: "product",
  data() {
    return {
      loading: false,
      search: {},
      productList: [],
      page: {
        start: 1,
        limit: 10,
        sizes: [10, 20, 30],
        totalcount: 0,
      },
    };
  },
  created() {
    this.getProductList();
  },
  methods: {
    getProductList() {
      //获取商品列表
      this.loading = true;
      var params = {
        start: this.page.start,
        limit: this.page.limit,
        ...this.search,
      };
      //去掉查询时的无效属性
      params = _.pickBy(params, (item) => item);
      _.pickBy(params, function (v) {
        return v;
      });
      productApi.productList(params).then((res) => {
        this.productList = res.data.list;
        this.page.totalcount = res.data.totalRow;
        this.loading = false;
      });
    },
    doSearch() {
      //搜索
      this.page.start = 1;
      this.getProductList();
    },
    doEdit(id) {
      //编辑
      this.$router.push({ name: "productEdit", params: { id } });
    },
    doDel(id) {
      //删除
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          productApi.productDel({ id }).then((res) => {
            var index = this.productList.findIndex((item) => {
              return item.id == id;
            });
            this.productList.splice(index, 1);
            this.getProductList();
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleSizeChange(val) {
      this.page.limit = val;
      this.getProductList();
    },
    handleCurrentChange(val) {
      this.page.start = val;
      this.getProductList();
    },

    codeChange(code, val, id) {
      //修改最新/最热/上架的code值
      var obj = {
        id,
      };
      obj[code] = val; //调用对象属性的方法: 法一:对象名.属性名; 法二:对象名['属性名']
      productApi.switchCode(obj).then((res) => {
        if (res.code == "error") {
          this.$message.error("更新失败");
        } else {
          this.$message.success("更新成功");
        }
      });
    },
    productAdd() {
      //跳转到新增页面
      this.$router.push({ name: "productDetail" });
    },
  },
};
</script>
<style lang='scss' scoped>
.product-main {
  .el-card {
    margin: 30px;
  }
}
</style>